<template>
	<view class="j-orderList">
		<view v-if="liststyle == 1" :class="[`item_${liststyle}`]" v-for="(item, index) in list" :key="index">
			<view class="info-1">
				<view class="order_no">
					<text>订单号：</text>
					<u-tooltip v-if="tg" color="#999" size="24rpx" :text="item.orderId" overlay :copyText="item.orderId"></u-tooltip>
					<u-tooltip v-else color="#999" size="24rpx" :text="item.order_id" overlay :copyText="item.order_id"></u-tooltip>
				</view>
				<!-- {{ item.order_id }} -->
				<text>{{ item.status_info }}</text>
			</view>

			<view class="info-2" v-for="(val, i) in item.products" :key="i">
				<image :src="val.image" mode="aspectFill" style="border-radius: 6rpx"></image>
				<view class="info" @click="handleItem(val)">
					<view class="row">
						<text class="line-1">{{ val.title }}</text>
						<text class="line-1">{{ val.key_vals }}</text>
					</view>

					<view class="box">
						<text v-if="jfen">{{ val.jifen }} 积分</text>
						<text v-else-if="xiefudou">{{ val.jifen }} 鞋服豆</text>
						<text v-else>￥{{ val.price_sale }}</text>
						<text>X{{ val.num }}</text>
					</view>
				</view>
			</view>
			<view class="info-3 tg" v-if="tg">
				<view class="tgitem">
					<text class="tgitem-label">推广人员：</text>
					<text class="tgitem-value">{{ item.orderInfo || '' }}</text>
				</view>
				<view class="tgitem">
					<text class="tgitem-label">购买人员：</text>
					<text class="tgitem-value">{{ item.from_user && item.from_user.nickname || '' }}</text>
				</view>
			</view>

			<view class="info-3 jf" v-else-if="jfen">
				<view class="tgitem">
					<text>合计应付：</text>
					<text>{{ summation(item, 'jifen') }} 积分</text>
				</view>
			</view>
			
			<view class="info-3 jf" v-else-if="xiefudou">
				<view class="tgitem">
					<text>合计应付：</text>
					<text>{{ summation(item, 'jifen') }} 鞋服豆</text>
				</view>
			</view>

			<view class="info-3" v-else>
				<text>总价：￥{{ item.price }}</text>
				<text>实付款：￥{{ item.price_payed }}</text>
			</view>
			<view class="active-box"  v-if="nbtn">
				
			</view>
			<view class="active-box" v-else-if="tg">
				<button @click="handleBtn(1, item)" class="btn2">订单详情</button>
			</view>
			
			<view class="active-box" v-else>
				<button v-if="item.status === -5 || item.status === 1 || item.status === 2" @click="handleBtn(0, item)" class="btn2">取消订单</button>
				<button v-if="item.status === -1" @click="handleBtn(5, item)" class="btn2">删除订单</button>
				<button @click="handleBtn(1, item)" class="btn2">订单详情</button>
				<!-- <button v-if="item.status == 3" @click="handleBtn(2, item)" class="btn2">查看物流</button> -->
				<button v-if="item.status === 3" @click="handleBtn(3, item)" class="btn1">确认收货</button>
				<button v-if="item.status === 4" :disabled="!!item.if_pingjia" @click="handleBtn(4, item)" class="btn1">订单评价</button>
			</view>
		</view>

		<view v-if="liststyle == 2" :class="['item', `item_${liststyle}`]" v-for="(item, index) in list" :key="index" @click="toNav(`order/shDetails?id=${item.id}`)">
			<view class="info-1">
				<view class="order_no">
					<text>订单号：</text>
					<u-tooltip color="#999" size="24rpx" :text="item.sn" overlay :copyText="item.sn"></u-tooltip>
				</view>
				<!-- {{ item.order_id }} -->
				<view class="rbox">
					<image src="@/static/images/tkicon.png" mode="aspectFit"></image>
					<text>退款</text>
				</view>
			</view>

			<view class="info-2" v-for="(val, i) in item.products" :key="i">
				<image :src="val.image" mode="aspectFill" style="border-radius: 6rpx"></image>
				<view class="info">
					<view class="row">
						<text class="line-1">{{ val.title }}</text>
						<text class="line-1">{{ val.key_vals }}</text>
					</view>

					<view class="box">
						<text v-if="jfen">{{ val.jifen }} 积分</text>
						<text v-else-if="xiefudou">{{ val.jifen }} 鞋服豆</text>
						<text v-else>￥{{ val.price_sale }}</text>
						<text>X{{ val.num }}</text>
					</view>
				</view>
			</view>

			<view class="active-box">
				<text class="line-1">{{ item.status_info }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'j-orderList',
	props: {
		list: {
			type: Array | Number,
			default: () => {
				return [];
			}
		},
		liststyle: {
			type: String | Number,
			default: 1
		},
		xz: {
			type: Boolean,
			default: false
		},
		tg: {
			type: Boolean,
			default: false
		},
		jfen: {
			type: Boolean,
			default: false
		},xiefudou: {
			type: Boolean,
			default: false
		},
		nbtn: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		summation() {
			return (item, key, i = 0) => {
				if (this.list.length > 0) {
					return item.products
						.reduce((total, current) => {
							return total + parseFloat(current[key]) * parseFloat(current['num']);
						}, 0)
						.toFixed(i);
				} else {
					return 0;
				}
			};
		},
		set_t() {
			return (data) => {
				switch (data) {
					case 1:
						return '待接单';
						break;
					case 2:
						return '待评价';
						break;
					case 3:
						return '已完成';
						break;
					case -1:
						return '已取消';
						break;
					default:
						// return '已取消';
						break;
				}
			};
		},
		set_d() {
			return (data) => {
				switch (data) {
					case '已取消':
						return '';
						break;
					case '待接单':
						return '回收站将在1小时内与您取得联系';
						break;
					case '待评价':
						return '欢迎您下次使用';
						break;
					case '已完成':
						return '欢迎您下次使用';
						break;
					default:
						break;
				}
			};
		}
	},

	data() {
		return {};
	},
	methods: {
		godz(item) {},
		handleItem(item) {
			this.$emit(`handleItem`, item);
		},
		handleBtn(flag, item) {
			this.$emit(`btns`, flag, item);
		}
	}
};
</script>

<style lang="less" scoped>
.j-orderList {
	padding-bottom: 40rpx;
	.item_1 + .item_1 {
		margin-top: 16rpx;
	}
	.item_1 {
		padding: 24rpx 24rpx 32rpx;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.info-1 {
			.flex-between();
			.order_no {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			// text:nth-of-type(1) {
			// 	display: flex;
			// 	align-items: center;
			// 	font-size: 24rpx;
			// 	font-family: PingFang SC-Regular, PingFang SC;
			// 	font-weight: 400;
			// 	color: #999999;
			// }
			& > text {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ff0000;
			}
		}
		.info-2 {
			.flex-between();
			position: relative;
			padding: 26rpx 0rpx;
			background: #ffffff;
			& > image {
				width: 144rpx;
				height: 144rpx;
				background-color: #f5f5f5;
			}
			.info {
				flex: 1;
				display: flex;
				height: 144rpx;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 32rpx;
				.row {
					& > text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
					& > text:nth-of-type(2) {
						margin-top: 8rpx;
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.box + .box {
					margin-top: 10rpx;
				}
				.box {
					.flex-between();
					text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
					text:nth-of-type(2) {
						font-size: 24rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
				}
			}
		}

		.info-3 {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			text + text {
				margin-left: 40rpx;
			}
			text {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
		.jf {
			justify-content: flex-end;
		}
		.tg {
			.flex-between();
			.tgitem {
				.tgitem-label{
					display: inline-block;
					white-space: nowrap;
				}
				.tgitem-value{
					
				}
			}
		}
		.active-box {
			display: flex;
			justify-content: flex-end;
			margin-top: 26rpx;
			button + button {
				margin-left: 24rpx;
			}
			button {
				width: 160rpx;
				height: 64rpx;
				margin: 0;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				&::after {
					border: none;
				}
			}
			.btn1 {
				background: @basecolor;
				color: #ffffff;
			}
			.btn2 {
				border: 2rpx solid #d5dbe8;
				color: #333333;
				background: transparent !important;
			}
		}
	}

	.item_2 + .item_2 {
		margin-top: 16rpx;
	}
	.item_2 {
		padding: 24rpx 24rpx 32rpx;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.info-1 {
			.flex-between();
			.order_no {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			// text:nth-of-type(1) {
			// 	display: flex;
			// 	align-items: center;
			// 	font-size: 24rpx;
			// 	font-family: PingFang SC-Regular, PingFang SC;
			// 	font-weight: 400;
			// 	color: #999999;
			// }
			.rbox {
				display: flex;
				align-items: center;
				image {
					width: 32rpx;
					height: 30rpx;
					margin-right: 8rpx;
				}
				& > text {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #ff0000;
				}
			}
		}
		.info-2 {
			.flex-between();
			position: relative;
			padding: 26rpx 0rpx;
			background: #ffffff;
			& > image {
				width: 144rpx;
				height: 144rpx;
				background-color: #f5f5f5;
			}
			.info {
				flex: 1;
				display: flex;
				height: 144rpx;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 32rpx;
				.row {
					& > text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
					& > text:nth-of-type(2) {
						margin-top: 8rpx;
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.box + .box {
					margin-top: 10rpx;
				}
				.box {
					.flex-between();
					text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
					text:nth-of-type(2) {
						font-size: 24rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
				}
			}
		}

		.info-3 {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			text + text {
				margin-left: 40rpx;
			}
			text {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
		.jf {
			justify-content: flex-end;
		}
		.tg {
			.flex-between();
			.tgitem {
			}
		}
		.active-box {
			display: flex;
			align-items: center;
			height: 72rpx;
			padding: 16rpx;
			background: #f5f7f9;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text:nth-of-type(1) {
				// width: 200rpx;
				white-space: nowrap;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			text:nth-of-type(2) {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #9695a3;
			}
		}
	}
}
</style>
